<template>
  <div id="container" ref="container" style="height: 400px;width: 100%"></div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  name: 'G2Test',
  created() {},
  data() {
    return {
      option: {
        title: {
          text: '良品率'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '530B三角窗上部右侧装饰条_喷涂件',
            type: 'line',
            data: [50, 61, 73, 51, 82, 92, 89],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: 'E38左侧扰流板-钢琴黑_喷涂件',
            type: 'line',
            data: [10, 30, 50, 70, 30, 72, 90],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      },
      data: [
        { week: ' 星期一 ', materialName: 'A19 雷达指甲玛瑙紫 ', number: 156 },
        { week: ' 星期一 ', materialName: 'A19 雷达支架极地白 ', number: 178 },
        { week: ' 星期一 ', materialName: 'A19 雷达支架夜影黑 ', number: 103 },

        { week: ' 星期二 ', materialName: 'A19 雷达指甲玛瑙紫 ', number: 122 },
        { week: ' 星期二 ', materialName: 'A19 雷达支架极地白 ', number: 191 },
        { week: ' 星期二 ', materialName: 'A19 雷达支架夜影黑 ', number: 115 },

        { week: ' 星期三 ', materialName: 'A19 雷达指甲玛瑙紫 ', number: 147 },
        { week: ' 星期三 ', materialName: 'A19 雷达支架极地白 ', number: 108 },
        { week: ' 星期三 ', materialName: 'A19 雷达支架夜影黑 ', number: 163 },

        { week: ' 星期四 ', materialName: 'A19 雷达指甲玛瑙紫 ', number: 173 },
        { week: ' 星期四 ', materialName: 'A19 雷达支架极地白 ', number: 139 },
        { week: ' 星期四 ', materialName: 'A19 雷达支架夜影黑 ', number: 101 },

        { week: ' 星期五 ', materialName: 'A19 雷达指甲玛瑙紫 ', number: 189 },
        { week: ' 星期五 ', materialName: 'A19 雷达支架极地白 ', number: 127 },
        { week: ' 星期五 ', materialName: 'A19 雷达支架夜影黑 ', number: 152 },

        { week: ' 星期六 ', materialName: 'A19 雷达指甲玛瑙紫 ', number: 118 },
        { week: ' 星期六 ', materialName: 'A19 雷达支架极地白 ', number: 144 },
        { week: ' 星期六 ', materialName: 'A19 雷达支架夜影黑 ', number: 109 },

        { week: ' 星期日 ', materialName: 'A19 雷达指甲玛瑙紫 ', number: 132 },
        { week: ' 星期日 ', materialName: 'A19 雷达支架极地白 ', number: 166 },
        { week: ' 星期日 ', materialName: 'A19 雷达支架夜影黑 ', number: 198 }
      ],
      chart: null
    }
  },
  methods: {
    renderChart() {
      this.chart = new Chart({
        container: this.$refs.container,
        autoFit: true,
        // width: 800,
        height: 400
      })

      // 声明可视化
      this.chart
        .data(this.data)
        .encode('x', 'week')
        .encode('y', 'number')
        .encode('color', 'materialName')
        .scale('x', {
          range: [0, 1]
        })
        .scale('y', {
          nice: true
        })
        .axis('y', { title: '数量' })
        .axis('x', { title: '星期' })
      this.chart
        .line()
        .encode('shape', 'smooth')
        .label({
          text: 'number',
          style: {
            dx: -10,
            dy: -12
          }
        })

      this.chart
        .point()
        .encode('shape', 'point')
        .tooltip(false)

      // 渲染可视化
      this.chart.render()
    }
  },
  mounted() {
    this.renderChart()
  },
  beforeDestroy() {
    this.chart.destroy()
  }
}
</script>

<style scoped></style>
